<template>
  <div class="machineroom-booking">
    <el-card class="box-card reserve">
      <div slot="header" class="clearfix">
        <i class="el-icon-office-building myicon" />
        <span>机房展示</span>
      </div>
      <div class="reserveForm">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <!-- <el-form :inline="true" :model="formInline" class="demo-form-inline"> -->
          <el-form-item label="所属楼栋">
            <el-input
              v-model="formInline.buildingNum"
              placeholder="所属楼栋"
              style="width: 180px"
            />
          </el-form-item>
          <el-form-item label="机房名称">
            <el-input
              v-model="formInline.machineroomType"
              placeholder="机房名称"
              style="width: 180px"
            />
          </el-form-item>
          <el-form-item label="机房人数">
            <el-input
              v-model="formInline.specialRequirements"
              placeholder="机房人数"
              style="width: 100px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="filterRooms">
              <i class="el-icon-search" /> 查询
            </el-button>
          </el-form-item>
        </el-form>
        <!-- </el-form> -->
      </div>
    </el-card>
    <el-row :gutter="20">
      <!-- 所有机房列表 -->
      <el-col :span="24"> <!-- Full width to accommodate for responsiveness -->
        <el-row :gutter="20">
          <!--          <el-col v-for="room in filteredMachineRooms" :key="room.id" :span="8">-->
          <el-col v-for="room in filteredMachineRooms" :key="room.roomId" :span="8">
            <el-tooltip effecst="dark" :content="room.roomName" placement="top">
              <el-card class="machineroom-box" @click="clickRoom(room)">
                <el-image
                  style="width: 100%; height: 100%; object-fit: cover"
                  :src="room.roomPictureUrl"
                  fit="cover"
                />
                <div class="machineroom-info">
                  <p>{{ room.roomName }}</p>
                  <!--                  <p>位置：{{ room.location }}</p>-->
                  <p>容纳人数：{{ room.pcCount }}</p>
                  <el-button
                    type="primary"
                    size="small"
                    plain
                    @click="clickReserve(room)"
                  >点击预约</el-button>
                  <el-button
                    type="success"
                    size="small"
                    plain
                    @click="clickReserve2(room)"
                  >机房信息</el-button>
                </div>
              </el-card>
            </el-tooltip>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-dialog title="预约表单" :visible.sync="reserveDialog" width="60%" @close="handleDialogClose">
      <el-form
        ref="reservationForm"
        :model="reservationForm"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="预约机房">
          <el-input v-model="selectedRoom2.roomName" disabled />
        </el-form-item>
        <el-form-item label="申请单位" prop="applyUnit">
          <el-input v-model="reservationForm.applyUnit" />
        </el-form-item>
        <el-form-item label="人数" prop="peopleCount">
          <el-input v-model.number="reservationForm.peopleCount" />
        </el-form-item>
        <el-form-item label="使用时间" prop="useTime">
          <el-date-picker
            v-model="reservationForm.useTime"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item label="使用软件" prop="software">
          <el-input v-model="reservationForm.software" />
        </el-form-item>
        <el-form-item label="负责人" prop="principal">
          <el-input v-model="reservationForm.principal" />
        </el-form-item>
        <el-form-item label="联系方式" prop="contact">
          <el-input v-model="reservationForm.contact" />
        </el-form-item>
        <el-form-item label="申请事由" prop="applicationReason">
          <el-input
            v-model="reservationForm.applicationReason"
            type="textarea"
          />
        </el-form-item>
        <el-form-item label="申请保证">
          <el-input
            v-model="reservationForm.guarantee"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="申请保证内容"
            disabled
          />
          <el-checkbox v-model="checked">同意并遵守规则</el-checkbox>
        </el-form-item>
        <!-- 辅导员或指导老师意见和实验中心审核意见可以视情况添加 -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reserveDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitForm(reservationForm)">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="机房信息" :visible.sync="reserveDialog2" width="50%" @close="handleDialogClose2">
      <!-- <div v-if="selectedRoom">
        <p>{{ selectedRoom.name }}</p>
        <p>位置：{{ selectedRoom.location }}</p>
        <p>容纳人数：{{ selectedRoom.capacity }}</p>
      </div> -->
      <el-form v-if="selectedRoom" :model="selectedRoom" label-position="left" label-width="120px">
        <el-form-item label="机房名称">
          <el-input v-model="selectedRoom.roomName" disabled />
        </el-form-item>
        <el-form-item label="容纳人数">
          <el-input v-model="selectedRoom.pcCount" disabled />
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="selectedRoom.roomState" disabled />
        </el-form-item>
        <el-form-item label="总机器数">
          <el-input v-model="selectedRoom.pcCount" disabled />
        </el-form-item>
        <el-form-item label="软件描述">
          <el-input v-model="selectedRoom.softwareDescribe" type="textarea" :rows="4" disabled />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reserveDialog2 = false">关  闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import jifang from '@/assets/machineroomImg/R-C.png'
import { InquiryAppointment, Appointment } from '@/api/jifang'
import { mapGetters } from 'vuex'
import { setId, getId, removeId } from '@/utils/auth'
import { getRoomInfo } from '@/api/application'
export default {
  computed: {
    ...mapGetters([
      'userId'
    ])
  },
  data() {
    return {
      roomInfo: [],
      machineRooms: [
        {
          id: 1,
          name: '理一 214',
          location: '2楼',
          capacity: '80人',
          status: '正常',
          totalMachines: 50,
          availableMachines: 40,
          softwareDescription: '该机房配备了Windows 10操作系统，并安装了Microsoft Office 365套件，以及常用的编程软件如Visual Studio Code、Python、Java等。此外，还提供了MATLAB和AutoCAD等专业软件，满足不同学科的实验和教学需求。'
        },
        {
          id: 2,
          name: '理一 217',
          location: '2楼',
          capacity: '80人',
          status: '正常',
          totalMachines: 60,
          availableMachines: 30,
          softwareDescription: '该机房主要用于计算机专业的实验和课程教学，配备了Ubuntu和Windows双系统，以及常用的编程工具如Eclipse、Sublime Text等。同时也安装了Matlab和Anaconda等数据分析软件，以支持相关课程的教学实践。'
        },
        {
          id: 3,
          name: '理一 218',
          location: '2楼',
          capacity: '150人',
          status: '维护中',
          totalMachines: 40,
          availableMachines: 20,
          softwareDescription: '该机房正在进行设备升级和网络优化工作，暂时无法提供使用。预计维护工作完成后，将重新配备最新的操作系统和软件环境，以满足用户的需求。'
        },
        {
          id: 4,
          name: '理一 216',
          location: '2楼',
          capacity: '100人',
          status: '正常',
          totalMachines: 70,
          availableMachines: 50,
          softwareDescription: '该机房提供了Windows和Linux双系统环境，涵盖了计算机科学、网络安全等多个领域的学习和实验内容。除了常用的办公软件外，还安装了Wireshark、Kali Linux等专业工具，以支持相关课程的教学和研究。'
        },
        {
          id: 5,
          name: '理一 318',
          location: '3楼',
          capacity: '200人',
          status: '正常',
          totalMachines: 80,
          availableMachines: 60,
          softwareDescription: '该机房是一个多功能实验室，配备了Windows、macOS和Linux等多个操作系统环境。除了常用的办公软件外，还安装了多种编程工具和专业软件，以满足不同学科的教学和研究需求。'
        },
        {
          id: 6,
          name: '理一 314',
          location: '3楼',
          capacity: '130人',
          status: '正常',
          totalMachines: 90,
          availableMachines: 70,
          softwareDescription: '该机房提供了丰富的软件环境，包括Windows和Ubuntu等操作系统，以及各种编程语言和工具。同时也安装了MATLAB、SolidWorks等专业软件，为工程类课程的教学和实验提供支持。'
        }
        // ... 更多机房信息
      ],
      reservationModalVisible: false,
      jifang,
      formInline: {
        buildingNum: '',
        machineroomType: '',
        specialRequirements: '',
        weekNum: '1',
        dayOfWeek: '1',
        beginSection: '1',
        endSection: '1'
      },
      filteredMachineRooms: [], // 存储筛选后的机房信息
      reserveDialog: false,
      reserveDialog2: false, // 控制弹出框的显示状态
      selectedRoom: null, // 存储当前点击的机房信息
      selectedRoom2: [],
      reservationForm: {
        applyUnit: '',
        peopleCount: '',
        useTime: {
          startDate: '',
          endDate: ''
        },
        software: '',
        principal: '',
        contact: '',
        applicationReason: '',
        guarantee:
          '我代表申请单位做出保证：在机房使用期间，对活动参与者的人身安全负责，在使用前对准备进入实验室的人员进行用电安全提醒，同时对实验室内设备财务安全负责，爱护使用机房内仪器设备，如有丢失照价赔偿。活动结束后做好活动记录并向实验中心交回申请表；同时负责清理现场，保证实验室清洁；全部人员离开实验室时关好门窗如不能做到则接受实验中心不再受理本单位以后使用实验室的任何申请的处分。'
        // 其他需要的字段...
      },
      rules: {
        applyUnit: [{ required: true, message: '请输入申请单位', trigger: 'blur' }],
        // peopleCount: [{ required: true, message: '请输入人数', trigger: 'blur' }],
        useTime: [
          { required: true, message: '请选择使用时间', trigger: 'change' },
          { type: 'array', required: true, message: '使用时间格式不正确', trigger: 'change' }
        ],
        // software: [{ required: true, message: '请输入使用软件', trigger: 'blur' }],
        principal: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
        contact: [
          { required: true, message: '请输入联系方式', trigger: 'blur' },
          { pattern: /^\d{11}$/, message: '联系方式必须为11位数字', trigger: 'blur' }
        ],
        applicationReason: [
          { required: true, message: '请输入申请事由', trigger: 'blur' },
          { min: 10, message: '申请事由至少10个字', trigger: 'blur' }
        ],
        guarantee: [{ required: true, message: '请同意并遵守规则', trigger: 'change' }]
      },
      checked: true
    }
  },
  created() {
    // 页面加载时显示所有机房
    this.filteredMachineRooms = this.machineRooms

    getRoomInfo()
      .then(res => {
        this.roomInfo = res.data
        this.filteredMachineRooms = this.roomInfo
      })
      .catch(res => {
        this.$message('获取机房信息失败！')
      })
  },
  methods: {
    pickerOptions: {
      disabledDate(time) {
        // 这里可以添加一些日期的禁用逻辑，例如禁用今天之前的日期
        return time.getTime() < Date.now() - 8.64e7
      }
    },
    filterRooms() {
      // 获取用户输入的筛选条件
      const buildingNum = this.formInline.buildingNum || ''
      const machineroomType = this.formInline.machineroomType || ''
      const specialRequirements = parseInt(this.formInline.specialRequirements, 10) || 0

      // 使用用户输入的筛选条件来过滤房间信息
      this.filteredMachineRooms = this.roomInfo.filter(room => {
        // 检查所属楼栋是否匹配
        const isBuildingNumMatch = buildingNum ? room.buildingNum === buildingNum : true
        // 检查机房名称是否匹配
        const isMachineroomTypeMatch = machineroomType ? room.roomName === machineroomType : true
        // 检查机房人数是否匹配
        const isPcCountMatch = !isNaN(specialRequirements) && specialRequirements ? room.pcCount === specialRequirements : true

        // 打印房间名称和用户输入的机房名称以供调试
        console.log(room.roomName, machineroomType)

        // 只有当所有给定的筛选条件都匹配（或者筛选条件为空）时，才包含该房间
        return isBuildingNumMatch && isMachineroomTypeMatch && isPcCountMatch
      })

      // 打印筛选后的房间信息以供调试
      console.log(this.filteredMachineRooms)
    },
    submitForm(reservationForm) {
      this.$refs.reservationForm.validate(valid => {
        if (valid) {
          const userId = getId('userId')
          const roomId = this.selectedRoom2.roomId
          // console.log(roomId)
          Appointment({
            'userId': userId,
            'roomId': roomId,
            'reserveTime': new Date().getTime(),
            'reserveDescribe': reservationForm.applicationReason
          })
            .then(res => {
              this.reserveDialog = false
              this.$message({
                type: 'success',
                message: res.message
              })
            })
            .catch(error => {
              console.error(error)
            })
        } else {
          this.$message.error('表单填写有误，请检查并重新提交')
          return false
        }
      })
    },
    handleDialogClose() {
      this.$refs.reservationForm.resetFields()
    },
    clickReserve(item) {
      this.reserveDialog = true
      this.selectedRoom2 = item
      Object.assign(this.reserveRoom, this.formInline)
      this.reserveRoom.name = item.name
      this.reserveRoom.machineroomId = item.machineroomId
    },
    handleDialogClose2() {
      this.$refs.machineRoomForm.resetFields()
    },
    clickReserve2(item) {
      this.reserveDialog2 = true
      this.selectedRoom = item
      Object.assign(this.reserveRoom, this.machineRooms)
      this.reserveRoom.name = item.name
      this.reserveRoom.machineroomId = item.machineroomId
    }
  }
}
</script>

<style scoped>
.machineroom-box {
  position: relative;
  padding-top: 1%; /* Set the height of the card relative to its width */
  margin-bottom: 20px; /* Add margin between cards */
}

.machineroom-box .el-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Ensure the card fills the container */
  transition: box-shadow 0.3s; /* Add transition for hover effect */
}

.machineroom-box:hover .el-card {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Add shadow on hover */
}

.machineroom-info {
  padding: 10px;
}

.no-scroll {
  resize: none; /* 禁止调整大小 */
  overflow: hidden; /* 隐藏滚动条 */
}

.red-text {
  color: red; /* 将文本颜色设置为红色 */
}

.auto-wrap {
  word-wrap: break-word; /* 确保单词能够自动换行 */
  white-space: pre-wrap; /* 确保文本能够自动换行 */
}
.card {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.myicon {
  font-size: 30px;
}
.itembefore {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgb(31, 145, 239);
  translate: -12px;
  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.2);
}
.msg {
  border-bottom: 1px solid rgb(168, 167, 167);
}

.reserve {
  width: 100%;
  margin-top: 20px;
}

.reserveForm {
  height: 80px;
  margin: 30px 20px;
  padding: 25px 130px;
  border: 1px solid rgb(0, 0, 0);
  border-radius: 20px;
}

.machineroomCard {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.machineroomFeature {
  font-size: 10px;
  color: #fff;
  margin: 0 3px;
  padding: 2px 4px;
  border-radius: 2px;
}
.bigRoom {
  background-color: rgb(67, 66, 66);
}
.middleRoom {
  background-color: rgb(113, 110, 110);
}
.smallRoom {
  background-color: rgb(151, 148, 148);
}
.largeMargin {
  background-color: rgb(48, 183, 48);
}
.middleMargin {
  background-color: rgb(221, 164, 57);
}
.smallMargin {
  background-color: rgb(210, 132, 145);
}
.noMargin {
  background-color: rgb(144, 6, 6);
}
.clickReserve {
  background-color: #f49e09;
}
.machineroom-booking {
  padding: 20px;
}

.machineroom-display {
  position: relative;
}

.display-header {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f2f2f2;
  padding: 10px;
  font-size: 18px;
  font-weight: bold;
}

.display-body {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
}

.machineroom-info {
  padding: 15px;
}

.machineroom-info p {
  margin: 5px 0;
}
.dialog-footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
/*
<el-form-item label="预约周数">
            <!-- <el-input v-model="formInline.weekNum" placeholder="第一周" style="width:100px;"></el-input> -->
            <el-select
              v-model="formInline.weekNum"
              placeholder="第一周"
              style="width: 100px"
            >
              <el-option label="第一周" value="1" />
              <el-option label="第二周" value="2" />
              <el-option label="第三周" value="3" />
              <el-option label="第四周" value="4" />
              <el-option label="第五周" value="5" />
              <el-option label="第六周" value="6" />
              <el-option label="第七周" value="7" />
              <el-option label="第八周" value="8" />
              <el-option label="第九周" value="9" />
            </el-select>
          </el-form-item>
          <el-form-item label="预约日期">
            <el-select
              v-model="formInline.dayOfWeek"
              placeholder="星期一"
              style="width: 100px"
            >
              <el-option label="星期一" value="1" />
              <el-option label="星期二" value="2" />
              <el-option label="星期三" value="3" />
              <el-option label="星期四" value="4" />
              <el-option label="星期五" value="5" />
              <el-option label="星期六" value="6" />
              <el-option label="星期日" value="7" />
            </el-select>
          </el-form-item>
          <el-form-item label="起始节数">
            <el-select
              v-model="formInline.beginSection"
              placeholder="第节"
              style="width: 100px"
            >
              <el-option label="第一节" value="1" />
              <el-option label="第二节" value="2" />
              <el-option label="第三节" value="3" />
              <el-option label="第四节" value="4" />
              <el-option label="第五节" value="5" />
              <el-option label="第六节" value="6" />
              <el-option label="第七节" value="7" />
              <el-option label="第八节" value="8" />
            </el-select>
          </el-form-item>
          <el-form-item label="结束节数">
            <el-select
              v-model="formInline.endSection"
              placeholder="第一节"
              style="width: 100px"
            >
              <el-option label="第一节" value="1" />
              <el-option label="第二节" value="2" />
              <el-option label="第三节" value="3" />
              <el-option label="第四节" value="4" />
              <el-option label="第五节" value="5" />
              <el-option label="第六节" value="6" />
              <el-option label="第七节" value="7" />
              <el-option label="第八节" value="8" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="info">
              <i class="el-icon-edit" />
              快速预约
            </el-button>
          </el-form-item>
*/
</style>

